import React, { useEffect, useImperativeHandle, useState } from "react";
import { Button, Checkbox, Form, Select, } from 'antd';
import skuPage from "./skupage.module.scss"
import SkuTable from "./sku-table";
import AddSkuForm from "./addForm";


/**
 * @description  SKU模块
 */
const XxSkuModel = ({
    propertyList = [],
    onRef,
}) => {

    // 表格列属性配置
    const [checkAtt, setCheckAtt] = useState([])
    // 属性onChange
    const onChangeAtt = (checkedValues, options) => {
        console.log("勾选：", checkedValues)
        // console.log("options:", options)
        setCheckAtt(checkedValues)
    };
    const [dataSource, setDataSource] = useState([
        // {
        //     key: 0,
        //     '内存': '128G',
        //     '颜色': '白色',
        //     goods_stock: 23,
        //     goods_price: 33
        // },
    ]);
    useEffect(() => {
        console.log("监听数据变化：", dataSource)
    }, [dataSource])

    const handleDelete = (key) => {
        console.log("要删除的key是：" + key)
        let newData = [];
        dataSource.forEach(item => {
            if (item.key !== key) {
                newData.push({
                    ...item
                })
            }
        })
        console.log("删除后剩余的项是：", newData)
        setDataSource(newData);
    };
    const defaultColumns = [
        {
            title: '数量',
            dataIndex: 'goods_stock',
            editable: true,
        },
        {
            title: '价格',
            dataIndex: 'goods_price',
            editable: true,
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (_, record) => {
                console.log('操作删除，', _, record)
                return <a onClick={() => handleDelete(record.key)}>删除</a>
            }

        },
    ];



    const [columns, setColumns] = useState(defaultColumns.map((col) => {
        if (!col.editable) {
            return col;
        }
        return {
            ...col,
        };
    }) || []);
    useEffect(() => {
        let newColumns = checkAtt.map((attributeName, i) => {
            return {
                title: attributeName,
                dataIndex: attributeName,
                editable: true,
            };
        })
        newColumns = [
            ...newColumns,
            ...defaultColumns,
        ]
        setColumns(newColumns.map(col => {
            return {
                ...col,

            }
        }))
    }, [checkAtt])

    // 获取skus信息
    const getGoodsPecs = () => {
        let goodsPecs = dataSource
        let skus = []
        goodsPecs.forEach((item) => {
            let good_specs = {
                ...item
            };
            delete (good_specs.key);
            delete (good_specs.goods_stock);
            delete (good_specs.goods_price);
            let object = {
                good_specs: JSON.stringify(good_specs),
                goods_stock: Number(item.goods_stock),
                goods_price: Number(item.goods_stock)
            };
            skus.push(object)
        })
        console.log("最终要保存的规格信息：", skus)
        return skus;
    }

    // 暴露给父组件获取sku规格信息
    useImperativeHandle(onRef, () => ({
        setDataSource:setDataSource,
        setCheckAtt:setCheckAtt,
        getGoodsPecs: getGoodsPecs
    }))


    return (
        <>
            <div>
                <Form.Item label="商品属性">
                    <Checkbox.Group
                        options={propertyList.map(item => ({
                            label: item.propertyName,
                            // value: JSON.parse(item.propertyValue)
                            value: item.propertyName,
                        }))}
                        onChange={onChangeAtt}
                        value={checkAtt}
                    />
                </Form.Item>
                {
                    // checkAtt.length > 0 &&
                    <div className={skuPage.box}>
                        {/* 添加规格的表单 */}
                        <AddSkuForm
                            dataSource={dataSource}
                            setDataSource={setDataSource}
                            columns={columns}
                            propertyList={propertyList}
                        />
                        <SkuTable
                            dataSource={dataSource}
                            setDataSource={setDataSource}
                            columns={columns}
                        />

                    </div>
                }

            </div>
        </>
    )

}
export default XxSkuModel